<template>
	<view class="classify">
		<custom-head-top>
			<template #left>
				分类管理
			</template>

			<template #right>
				<button type="primary" size="mini" @click="addClassify">
					<uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
					新增分类
				</button>
				<button type="warn" size="mini" @click="handleBatchRemove" :disabled="!ids.length">
					<uni-icons type="trash" size="14" :color="ids.length?'#fff' : 'rgba(255,255,255,0.5)'"></uni-icons>
					批量删除
				</button>
			</template>
		</custom-head-top>

		<view class="main">
			<uni-table ref="tableRef" border stripe emptyText="暂无更多数据" type="selection"
				@selection-change="selectionChange">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="left" width="150">缩略图</uni-th>
					<uni-th align="left">分类名称</uni-th>
					<uni-th align="left">排序</uni-th>
					<uni-th align="left">是否推荐</uni-th>
					<uni-th align="left">是否启用</uni-th>
					<uni-th align="left" width="200">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="item in classData" :key="item._id">
					<uni-td align="center">
						<image class="thumb" @click="previewImg(item.picurl)" :src="getSmallImg(item.picurl, 100)"
							mode="aspectFill" />
					</uni-td>
					<uni-td>{{item.name}}</uni-td>
					<uni-td>{{item.sort}}</uni-td>
					<uni-td>
						<uni-tag v-if="item.select" :inverted="true" text="推荐" type="error" />
						<uni-tag v-else :inverted="true" text="普通" />
					</uni-td>
					<uni-td>
						<switch :checked="item.enable" color="#FFCC33"
							style="transform:scale(0.8);transform-origin: left center;"
							@change="enableChange($event, item._id)" />
					</uni-td>
					<uni-td>
						<view class="operate-btn-group">
							<button type="primary" size="mini" @click="edit(item._id)">修改</button>
							<button type="warn" size="mini" @click="remove(item._id)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<view class="paginate">
			<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
		</view>

		<classfiyPopup ref="classPopRef" :item="item" :type="type" :maxSort="classData[classData.length - 1]?.sort"
			@success="getClassify()"></classfiyPopup>

	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import classfiyPopup from './children/classfiyPopup.vue';
	import { previewImg, showModal, showToast } from '../../utils/common';
	import { getSmallImg } from '../../utils/tools';
	const classfiyCloudObj = uniCloud.importObject("admin-bizhi-classify", {
		customUI: true
	});
	const classPopRef = ref(null);
	const classData = ref([]);
	const ids = ref([]);
	const tableRef = ref(null);
	const item = ref(null);
	const type = ref("add");

	//点击新增分类
	const addClassify = () => {
		type.value = 'add';
		classPopRef.value.open();
	}
	const getClassify = async () => {
		let {
			errCode,
			errMsg,
			data
		} = await classfiyCloudObj.list();
		if (errCode !== 0) {
			return showToast({
				title: errMsg
			});
		}
		classData.value = data;
		console.log(classData.value);
	}



	//选择器
	const selectionChange = (e) => {
		ids.value = e.detail.index.map(index => classData.value[index]._id);
		console.log(ids.value);
	}

	//批量删除
	const handleBatchRemove = async () => {
		await remove(ids.value);
	}

	//删除记录
	const remove = async (id) => {
		let arrs = Array.isArray(id) ? [...id] : [id];
		try {
			let feedback = await showModal({
				content: "是否确认删除?"
			});

			if (feedback != "confirm") return;
			let {
				errCode,
				errMsg
			} = classfiyCloudObj.remove(arrs);
			if (errCode !== 0) showToast({
				title: errMsg
			});
			showToast({
				title: "删除成功"
			});
			tableRef.value.clearSelection();
			ids.value = [];
			getClassify();
		} catch (err) {
			console.log(err);
		}
	}

	//修改一条记录
	const edit = async (id) => {
		try {
			let {
				data,
				errCode,
				errMsg
			} = await classfiyCloudObj.item(id);
			if (errCode != 0) return showModal({
				content: errMsg,
				showCancel: false
			});
			item.value = data;
			type.value = 'edit';
			classPopRef.value.open();
		} catch (err) {
			console.log(err);
		}

	}

	//修改启用状态
	const enableChange = async (e, id) => {
		try {
			uni.showLoading({
				mask: true
			})
			let {
				errCode,
				errMsg
			} = await classfiyCloudObj.update({
				_id: id,
				enable: e.detail.value
			});
			if (errCode != 0) return showToast({
				title: errMsg
			});
			showToast({
				title: "修改成功"
			})
			getClassify();
		} catch (err) {
			console.log(err);
		} finally {
			uni.hideLoading();
		}


	}
	getClassify();
</script>

<style lang="scss" scoped>
	.main {
		padding: 20px 20px 0px 20px;

		.thumb {
			width: 60px;
			height: 90px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>